<template>
	<div class="main app-container">
		<div class="header">
			{{ customerBo.customerName }}
			<el-button v-if="userStore.$state.roles.includes('yw2')" style="float: right" type="primary" @click="addProject"
				><el-icon style="margin-right: 3px"><CirclePlusFilled /></el-icon>添加项目信息</el-button
			>
			<el-button style="float: right; margin-right: 15px" type="primary" @click="toEdit"
				><el-icon style="margin-right: 3px"><Edit /></el-icon>修改</el-button
			>
			<!-- <el-button
				v-if="userStore.$state.roles.includes('yw2') || (userStore.$state.roles.includes('yw1') && dataList.length == 0)"
				style="float: right; margin-right: 3px"
				type="primary"
				@click="deleteCus"
				><el-icon style="margin-right: 3px"><Delete /></el-icon>删除</el-button
			> -->
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 基本信息
			</div>
			<div class="info">
				<div class="item">
					<span class="label">企业类别</span>
					<dict-tag :options="customer_category" :value="customerBo.customerCategory" />
				</div>
				<div class="item">
					<span class="label">地区</span>
					{{ customerBo.provinceName + ' ' + customerBo.cityName + ' ' + customerBo.areaName }}
				</div>
				<div class="item">
					<span class="label">地址</span>
					{{ customerBo.customerAdress }}
				</div>
				<div class="item">
					<span class="label">企业电话</span>
					{{ customerBo.customerMobile }}
				</div>
				<div class="item">
					<span class="label">企业网站</span>
					{{ customerBo.customerWebSite }}
				</div>
				<div class="item">
					<span class="label">企业类型</span>
					<dict-tag :options="customer_type" :value="customerBo.customerType" />
				</div>
			</div>
		</div>
		<!-- <el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 实验室基本信息
			</div>
			<div class="info">
				<div class="item">
					<span class="label">预计时间</span>
					{{ customerBo.labPlanTime }}
				</div>
			</div>
		</div> -->
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 企业联系人
			</div>
			<div class="info" style="flex-wrap: nowrap" v-for="item in customerContacts" :key="item.contactsId">
				<div class="item" style="flex: 1">
					<span class="label">姓名</span>
					{{ item.contactsName }}
				</div>
				<div class="item" style="flex: 1">
					<span class="label">角色</span>
					<dict-tag :options="contacts_role" :value="item.contactsRole" />
				</div>
				<div class="item" style="flex: 1">
					<span class="label">职位</span>
					{{ item.contactsJob }}
				</div>
				<div class="item" style="flex: 1">
					<span class="label">手机</span>
					{{ item.contactsMobile }}
				</div>
				<div class="item" style="flex: 1">
					<span class="label">邮箱</span>
					{{ item.contactsEmail }}
				</div>
			</div>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">
				<el-icon style="margin-right: 2px; position: relative; top: 2px"><DocumentCopy /></el-icon> 跟单信息
			</div>
			<div class="info">
				<div class="item">
					<span class="label">录入时间</span>
					{{ customerBo.financeAccountName }}
				</div>
				<div class="item">
					<span class="label">更新时间</span>
					{{ customerBo.financeAccountName }}
				</div>
			</div>
		</div>
		<el-card class="box-card">
			<template #header>
				<div>
					<span style="font-weight: 600">财务信息</span>
				</div>
			</template>
			<div class="cai-wu">
				<div>
					<span class="label">户名</span>
					{{ customerBo.financeAccountName }}
				</div>
				<div>
					<span class="label">开户行</span>
					{{ customerBo.financeAccountBlank }}
				</div>
				<div>
					<span class="label">账号</span>
					{{ customerBo.financeAccountNumber }}
				</div>
				<div>
					<span class="label">税号</span>
					{{ customerBo.financeUnifiedCode }}
				</div>
				<div>
					<span class="label">附件</span>
					<span style="cursor: pointer; color: #409eff; margin-left: 10px" @click="handlePictureCardPreview">查看</span>
				</div>
			</div>
		</el-card>
		<el-divider style="margin: 15px 0" />
		<div class="content" style="margin-bottom: 50px">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />项目信息
			</div>
			<el-divider style="margin: 15px 0" />
			<BaseTable :columns="columns" :dataList="dataList">
				<template #projectName="{ row }">
					<span style="cursor: pointer; color: #409eff" @click="toDetail(row)">{{ row.projectName }}</span>
				</template>
			</BaseTable>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content" style="margin-bottom: 50px">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />日志信息
				<el-button
					v-if="userStore.$state.roles.includes('yw2') || userStore.$state.roles.includes('yw1')"
					style="float: right; margin-top: -5px"
					type="primary"
					@click="addLog"
					><el-icon style="margin-right: 3px"><CirclePlusFilled /></el-icon>添加日志</el-button
				>
			</div>
			<el-divider style="margin: 15px 0" />
			<BaseTable :columns="columnsr" :dataList="dataListr" noSelection>
				<template #action="{ row }">
					<el-button type="warning" size="small" plain @click="toLog(row)">查看</el-button>
					<el-button type="primary" v-if="row.createUserCode == userStore.$state.name" size="small" plain @click="editRecod(row)">编辑</el-button>
					<el-button
						type="primary"
						v-if="userStore.$state.roles.some((e) => e.includes('yw1')) && row.sending == '0'"
						size="small"
						plain
						@click="sendRecod(row)"
						>推送</el-button
					>
				</template>
			</BaseTable>
		</div>
		<div style="line-height: 80px; height: 80px; padding-left: 45%">
			<el-button @click="reback">返回</el-button>
		</div>
		<el-dialog v-model="dialogVisible">
			<img v-full :src="pre + customerBo.financeFile" alt="Preview Image" />
		</el-dialog>
		<el-dialog title="日志推送" v-model="open" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
			<el-form ref="baseform" :model="form" label-position="right" label-width="120px">
				<el-form-item prop="recipientIdList" label="收件人">
					<el-checkbox-group v-model="form.recipientIdList">
						<el-checkbox v-for="item in listPerson" :key="item.userId" :label="item.userId">{{ item.nickName }}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item prop="appendContent" label="备注">
					<el-input v-model="form.appendContent" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="text-align: right">
					<el-button type="primary" @click="submit">确 定</el-button>
					<el-button
						@click="
							() => {
								open = false
							}
						"
						>取 消</el-button
					>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import BaseTable from '@/components/BaseTable'
import { useRoute } from 'vue-router'
import { getCustom, listLog, mailSend } from '@/api/custom/custom'
import { getConfigKey } from '@/api/system/config'
import useUserStore from '@/store/modules/user'
import useTagsViewStore from '@/store/modules/tagsView'
import { getPersons } from '@/api/email/email'

const tagsView = useTagsViewStore()
const userStore = useUserStore()
const pre = ref('')

getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})
const { proxy } = getCurrentInstance()
const { customer_category, customer_type, contacts_role, project_stage, project_category, log_type } = proxy.useDict(
	'customer_category',
	'customer_type',
	'contacts_role',
	'project_stage',
	'project_category',
	'log_type'
)
const route = useRoute()
const router = useRouter()

const customerBo = ref({})
const customerContacts = ref([])
// 列显隐信息
const columns = ref([
	{ key: 0, label: `ID`, width: '100', prop: 'projectCode', type: 'text', visible: true },
	{ key: 1, label: `名称`, prop: 'projectName', type: 'custom', visible: true },
	{ key: 2, width: '90', label: `合同金额`, prop: 'treatyTotalMoney', type: 'text', visible: true },
	{ key: 3, width: '90', label: `阶段`, prop: 'projectStage', type: 'select', data: project_stage, visible: true },
	{ key: 7, width: '90', label: `类型`, prop: 'projectCategory', type: 'select', data: project_category, visible: true },
	{ key: 4, width: '90', label: `负责人`, prop: 'projectContacts', type: 'text', visible: true },
	{ key: 5, width: '150', label: `开始时间`, prop: 'createTime', type: 'dateTime', visible: true },
	{ key: 6, width: '150', label: `更新时间`, prop: 'createTime', type: 'dateTime', visible: true }
])
const toDetail = (row) => {
	router.push({
		path: '/project/projectDetail',
		query: { id: row.projectId }
	})
}
const open = ref(false)
const form = reactive({
	logId: '',
	recipientIdList: [],
	appendContent: ''
})
const openRow = ref()
const submit = () => {
	mailSend(form)
		.then(() => {
			openRow.value.sending = '1'
			proxy.$modal.msgSuccess('推送成功!')
			open.value = false
		})
		.catch(() => {})
}
const listPerson = ref([])
getPersons().then((res) => {
	listPerson.value = res
})
const sendRecod = (row) => {
	open.value = true
	form.recipientIdList = []
	form.appendContent = ''
	form.logId = row.logId
	openRow.value = row
}
const dataList = ref([])
const dataListr = ref([])
//项目阶段日志
const columnsr = ref([
	{ key: 1, label: `日志标题`, prop: 'logName', type: 'text', visible: true },
	{ key: 2, width: '150', label: `日志时间`, prop: 'logTime', type: 'date', visible: true },
	{ key: 4, width: '90', label: `发布`, prop: 'nickName', type: 'text', visible: true },
	{ key: 6, width: '220', label: `操作`, prop: 'action', type: 'custom', visible: true }
])
if (route.query.id) {
	getCustom(route.query.id).then((res) => {
		customerBo.value = res.customerBo
		customerContacts.value = res.customerContacts
		dataList.value = res.project
	})
	listLog({ customerId: route.query.id }).then((res) => {
		dataListr.value = res.rows
	})
}
const addProject = () => {
	router.push({
		path: '/project/projectAdd',
		query: { id: route.query.id }
	})
}
const addLog = () => {
	router.push({
		path: '/customer/cAddLog',
		query: { id: route.query.id, customerName: customerBo.value.customerName }
	})
}
const editRecod = (row) => {
	router.push({
		path: '/customer/cEditLog',
		query: { id: route.query.id, logId: row.logId, customerName: customerBo.value.customerName }
	})
}
const toLog = (row) => {
	router.push({
		path: '/customer/cLogDetail',
		query: { id: route.query.id, logId: row.logId, customerName: customerBo.value.customerName }
	})
}

const toEdit = () => {
	router.push({
		path: '/customer/customEdit',
		query: {
			id: customerBo.value.customerId
		}
	})
}

const deleteCus = () => {
	proxy.$modal
		.confirm('是否确认此操作？')
		.then(() => {
			return delCustom(customerBo.value.customerId)
		})
		.then(() => {
			search()
			proxy.$modal.msgSuccess('删除成功')
		})
		.catch(() => {})
}
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url
	dialogVisible.value = true
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.main {
	background-color: #ffffff;
	.header {
		font-size: 24px;
		color: black;
		font-weight: 600;
	}
	.content {
		.content-header {
			color: black;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.info {
			display: flex;
			flex-wrap: wrap;
			line-height: 40px;
			.item {
				flex: 0 0 33%;
				font-size: 14px;

				.label {
					color: #325e8e;
					background-color: #f2f2f1;
					padding: 5px;
					margin-right: 5px;
				}
			}
		}
	}
	.box-card {
		background-color: #f9f9f9;
		margin-top: 10px;
		.cai-wu {
			font-size: 14px;
			display: flex;
			justify-content: space-around;
			.label {
				font-weight: 600;
			}
		}
	}
}
</style>
